<template>
  <div
    class="learun-theme learun-header--icon-btn"
    @click.stop="openFrameworkSetting"
  >
    <div class="learun-header--icon-btn-wraper">
      <i class="learun-icon-color"></i>
    </div>

    <l-drawer
      :title="$t('框架设置')"
      :visible.sync="visible"
      :showOk="false"
      :showClose="false"
      :wrapperClosable="true"
      :modal="false"
      size="320px"
    >
      <div class="l-rblock learun-theme-setting" style="padding: 16px 24px 0">
        <h3 class="learun-theme-setting-title">导航风格</h3>
        <div class="learun-theme-setting-checkbox mt32">
          <el-tooltip
            class="item"
            effect="dark"
            content="侧边布局"
            placement="top"
            :enterable="false"
          >
            <div
              class="learun-theme-setting-nav-item side"
              @click="handleNavClick('side')"
            >
              <i
                class="el-icon-check learun-theme-setting-icon"
                v-if="lr_theme.nav == 'side'"
              ></i>
            </div>
          </el-tooltip>
          <el-tooltip
            class="item"
            effect="dark"
            content="混合布局"
            placement="top"
            :enterable="false"
          >
            <div
              class="learun-theme-setting-nav-item mix"
              @click="handleNavClick('mix')"
            >
              <i
                class="el-icon-check learun-theme-setting-icon"
                v-if="lr_theme.nav == 'mix'"
              ></i>
            </div>
          </el-tooltip>
          <el-tooltip
            class="item"
            effect="dark"
            content="顶部布局"
            placement="top"
            :enterable="false"
          >
            <div
              class="learun-theme-setting-nav-item top"
              @click="handleNavClick('top')"
            >
              <i
                class="el-icon-check learun-theme-setting-icon"
                v-if="lr_theme.nav == 'top'"
              ></i>
            </div>
          </el-tooltip>
          <el-tooltip
            class="item"
            effect="dark"
            content="左上布局"
            placement="top"
            :enterable="false"
          >
            <div
              class="learun-theme-setting-nav-item side3"
              @click="handleNavClick('side3')"
            >
              <i
                class="el-icon-check learun-theme-setting-icon"
                v-if="lr_theme.nav == 'side3'"
              />
            </div>
          </el-tooltip>

          <el-tooltip
            class="item"
            effect="dark"
            content="底部布局"
            placement="top"
            :enterable="false"
          >
            <div
              class="learun-theme-setting-nav-item bottom"
              @click="handleNavClick('bottom')"
            >
              <i
                class="el-icon-check learun-theme-setting-icon"
                v-if="lr_theme.nav == 'bottom'"
              ></i>
            </div>
          </el-tooltip>

          <el-tooltip
            class="item"
            effect="dark"
            content="简约侧边"
            placement="top"
            :enterable="false"
          >
            <div
              class="learun-theme-setting-nav-item side2"
              @click="handleNavClick('side2')"
            >
              <img
                style="width: 8px; height: 40px; position: absolute"
                src=""
              />
              <i
                class="el-icon-check learun-theme-setting-icon"
                v-if="lr_theme.nav == 'side2'"
              />
            </div>
          </el-tooltip>
        </div>
        <h3 class="learun-theme-setting-title" style="margin-top: 16px">
          导航颜色
        </h3>
        <div class="learun-theme-setting-checkbox mt32">
          <div
            @click="handleColorTypeClick('black')"
            class="learun-theme-setting-color-type-item black"
          >
            <i
              class="el-icon-check learun-theme-setting-icon"
              v-if="lr_theme.colorType == 'black'"
            ></i>
          </div>
          <div
            v-if="!['bottom','side3'].includes(lr_theme.nav)"
            @click="handleColorTypeClick('white')"
            class="learun-theme-setting-color-type-item white"
          >
            <i
              class="el-icon-check learun-theme-setting-icon"
              v-if="lr_theme.colorType == 'white'"
            ></i>
          </div>
          <div
            v-if="!['side2','side3'].includes(lr_theme.nav)"
            @click="handleColorTypeClick('blue')"
            class="learun-theme-setting-color-type-item blue"
          >
            <i
              class="el-icon-check learun-theme-setting-icon"
              v-if="lr_theme.colorType == 'blue'"
            ></i>
          </div>
          <div
            v-if="['side2'].includes(lr_theme.nav)"
            @click="handleColorTypeClick('color')"
            class="learun-theme-setting-color-type-item color"
          >
            <i
              class="el-icon-check learun-theme-setting-icon"
              v-if="lr_theme.colorType == 'color'"
            ></i>
          </div>
          <!--深蓝-->
          <div
            v-if="['side'].includes(lr_theme.nav)"
            @click="handleColorTypeClick('darkBlue')"
            class="learun-theme-setting-color-type-item darkBlue"
          >
            <i
              class="el-icon-check learun-theme-setting-icon"
              v-if="lr_theme.colorType == 'darkBlue'"
            />
          </div>
        </div>
        <h3 class="learun-theme-setting-title" style="margin-top: 16px">
          主题颜色
        </h3>
        <div class="learun-theme-setting-checkbox mt32">
          <!--深蓝-->
          <div
            @click="handleColorClick('dark_blue')"
            class="theme-color dark_blue"
          >
            <i
              class="el-icon-check color-icon"
              v-if="lr_theme.color == 'dark_blue'"
            />
          </div>
          <div @click="handleColorClick('blue')" class="theme-color blue">
            <i
              class="el-icon-check color-icon"
              v-if="lr_theme.color == 'blue'"
            ></i>
          </div>
          <div @click="handleColorClick('red')" class="theme-color red">
            <i
              class="el-icon-check color-icon"
              v-if="lr_theme.color == 'red'"
            ></i>
          </div>
          <div @click="handleColorClick('orange')" class="theme-color orange">
            <i
              class="el-icon-check color-icon"
              v-if="lr_theme.color == 'orange'"
            ></i>
          </div>
          <div @click="handleColorClick('yellow')" class="theme-color yellow">
            <i
              class="el-icon-check color-icon"
              v-if="lr_theme.color == 'yellow'"
            ></i>
          </div>
          <div @click="handleColorClick('cyan')" class="theme-color cyan">
            <i
              class="el-icon-check color-icon"
              v-if="lr_theme.color == 'cyan'"
            ></i>
          </div>
          <div @click="handleColorClick('green')" class="theme-color green">
            <i
              class="el-icon-check color-icon"
              v-if="lr_theme.color == 'green'"
            ></i>
          </div>
          <div @click="handleColorClick('blue2')" class="theme-color blue2">
            <i
              class="el-icon-check color-icon"
              v-if="lr_theme.color == 'blue2'"
            ></i>
          </div>
          <div @click="handleColorClick('purple')" class="theme-color purple">
            <i
              class="el-icon-check color-icon"
              v-if="lr_theme.color == 'purple'"
            ></i>
          </div>
        </div>
        <h3 class="learun-theme-setting-title mt">其它设置</h3>
        <el-form size="mini" label-width="180px" label-position="left">
          <el-form-item :label="$t('菜单栏宽度')">
            <el-input-number
              v-model="sideWidth"
              controls-position="right"
              :placeholder="$t('请输入')"
              :disabled="!['side', 'mix'].includes(lr_theme.nav)"
            ></el-input-number>
          </el-form-item>
          <el-form-item :label="$t('顶部条高度')">
            <el-input-number
              :min="48"
              :max="72"
              v-model="headerHeight"
              controls-position="right"
              :placeholder="$t('请输入')"
            />
          </el-form-item>
          <el-form-item :label="$t('菜单选项卡')">
            <el-switch v-model="showTabs"></el-switch>
          </el-form-item>
          <el-form-item :label="$t('次级菜单图标')">
            <el-switch v-model="showIcon"></el-switch>
          </el-form-item>
        </el-form>
      </div>
    </l-drawer>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      visible: false,
    };
  },
  computed: {
    sideWidth: {
      get() {
        return this.lr_theme.sideWidth;
      },
      set(val) {
        this.$store.commit("app/SET_THEME_SIDEWIDTH", val);
      },
    },
    headerHeight: {
      get() {
        return this.lr_theme.headerHeight;
      },
      set(val) {
        this.$store.commit("app/SET_THEME_HEADERHEIGHT", val);
      },
    },
    showTabs: {
      get() {
        return this.lr_theme.showTabs;
      },
      set(val) {
        this.$store.commit("app/SET_THEME_SHOWTABS", val);
      },
    },
    showIcon: {
      get() {
        return this.lr_theme.showIcon;
      },
      set(val) {
        this.$store.commit("app/SET_THEME_SHOWICON", val);
      },
    },
  },
  methods: {
    openFrameworkSetting() {
      this.visible = true;
    },
    handleNavClick(type) {
      if (this.lr_theme.colorType == "white" && type == "bottom") {
        this.handleColorTypeClick("black");
      }
      if (this.lr_theme.colorType == "blue" && type == "side2") {
        this.handleColorTypeClick("black");
      }
      if (this.lr_theme.colorType == "color" && type != "side2") {
        this.handleColorTypeClick("black");
      }
      if (this.lr_theme.colorType == "darkBlue" && type != "side") {
        this.handleColorTypeClick("black");
      }
      this.$store.commit("app/SET_THEME_NAV", type);
    },
    handleColorTypeClick(type) {
      this.$store.commit("app/SET_THEME_COLORTYPE", type);
    },
    handleColorClick(color) {
      this.$store.commit("app/SET_THEME_COLOR", color);
    },
  },
};
</script>
<style lang="scss" scoped>
.learun-theme-setting {
  .mt {
    margin-top: 48px !important;
  }
  .mt32 {
    margin-top: 32px !important;
  }
  &-title {
    margin-top: 0;
    margin-bottom: 16px;
    color: #262626;
    font-size: 14px;
    line-height: 22px;
  }
  &-checkbox {
    display: flex;
    flex-wrap: wrap;
  }
  &-nav-item,
  &-color-type-item {
    position: relative;
    width: 64px;
    min-width: 64px;
    height: 40px;
    margin-right: 32px;
    overflow: hidden;
    background-color: #f5f5f5;
    box-shadow: 2px 2px 7px 0 rgba(0, 0, 0, 0.12);
    cursor: pointer;
    margin-bottom: 32px;
  }
  &-nav-item:nth-child(3n + 3),
  &-color-type-item:nth-child(3n + 3) {
    margin-right: 0;
  }

  &-nav-item:before {
    position: absolute;
    top: 0;
    left: 0;
    width: 16px;
    height: 100%;
    background-color: #fff;
    content: "";
  }
  &-nav-item:after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 8px;
    background-color: #fff;
    content: "";
  }

  .side:before,
  .side:after {
    background-color: #262626;
  }

  .mix:after {
    background-color: #262626;
  }

  .top:after {
    background-color: #262626;
  }
  .top:before {
    display: none;
  }

  .side2:before {
    background-color: #262626;
    width: 8px;
  }
  .side2:after {
    display: none;
  }

  .side3:before {
    border-left: 14px solid #000000;
    height: 40px;
    top: 0px;
  }

  .side3:after {
    display: none;
  }

  .bottom:before {
    border-left: 12px solid #262626;
    width: 24px;
    height: 16px;
    top: 16px;
  }
  .bottom:after {
    background-color: #262626;
    bottom: 0;
    top: auto;
  }

  &-color-type-item.black {
    background-color: #262626;
  }
  &-color-type-item.white {
    background-color: #fff;
  }
  &-color-type-item.blue {
    background-color: #3399ff;
  }

  &-color-type-item.darkBlue {
    background-color: #07093e;
  }
  &-color-type-item.color {
    &:before {
      content: "";
      background: radial-gradient(
        circle farthest-side at left bottom,
        rgb(255 255 255 / 25%) 0%,
        rgb(255 255 255 / 25%) 0%,
        rgb(217 179 255 / 25%) 29%,
        rgb(255 255 191 / 25%) 57%,
        rgb(153 221 255 / 25%) 78%,
        rgb(179 198 255 / 25%) 100%
      );
      position: absolute;
      height: 100%;
      width: 100%;
      top: 0;
      left: 0;
      filter: blur(20px);
    }
  }

  &-icon {
    position: absolute;
    top: 12px;
    left: 32px;
    color: #000;
    font-size: 18px;
    pointer-events: none;
  }

  &-color-type-item.black &-icon,
  &-color-type-item.blue &-icon,
  &-color-type-item.darkBlue &-icon {
    color: #fff;
  }

  .color-icon {
    color: #fff;
    font-size: 18px;
    pointer-events: none;
    display: block;
  }

  .theme-color {
    position: relative;
    width: 24px;
    min-width: 24px;
    height: 24px;
    margin-right: 4px;
    overflow: hidden;
    background-color: #3399ff;
    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;

    &.red {
      background-color: #ff3443;
    }
    &.orange {
      background-color: #ff8600;
    }
    &.yellow {
      background-color: #faad14;
    }
    &.cyan {
      background-color: #00c6c1;
    }
    &.green {
      background-color: #00a100;
    }
    &.blue2 {
      background-color: #2055f4;
    }
    &.purple {
      background-color: #9b50e6;
    }

    &.dark_blue {
      background-color: #5e95ff;
    }
  }
}
</style>

<style lang="scss">
.learun-theme-setting {
  .el-form-item__content {
    text-align: right;
  }
}
</style>